import React, {
    useEffect,
    useRef,
} from 'react';
import { Chart } from '@antv/g2';
const data = [
    { year: '2001', population: 41.8 },
    { year: '2002', population: 38 },
    { year: '2003', population: 33.7 },
    { year: '2004', population: 30.7 },
    { year: '2005', population: 25.8 },
    { year: '2006', population: 31.7 },
    { year: '2007', population: 33 },
    { year: '2008', population: 46 },
    { year: '2009', population: 38.3 },
    { year: '2010', population: 28 },
    { year: '2011', population: 42.5 },
    { year: '2012', population: 30.3 },
];
const G2_3 = () => {
    // 使用 useRef 创建一个 ref 对象，用于获取 DOM 节点
    const chartRef = useRef<Chart>();

    useEffect(() => {
        // 初始化图表实例
        chartRef.current = new Chart({
            container: 'g2_3',
            autoFit: true,
        });
        chartRef.current.coordinate({ type: 'polar', innerRadius: 0.2 });
        chartRef.current.interval()
            .data(data)
            .encode('x', 'year')
            .encode('y', 'population')
            .encode('color', 'year')
            .scale('x', { padding: 0 })

            .axis(false)
            .tooltip({
                title: (d) => d.year,
                items: [
                    (d, i, data, column) => ({
                        name: d.year,
                        value: d.population,
                        channel: 'y',
                    }),
                ],
            })
            .legend({
                color: {
                    position: 'right',
                    layout: {
                        justifyContent: 'center',
                    },
                },
            })
            .state('active', { stroke: 'black', lineWidth: 1, zIndex: 101 })
            .state('inactive', { opacity: 0.5, zIndex: 100 })
            .style({
                lineWidth: 1,
                stroke: '#fff',
            })
            .legend(false);

        chartRef.current.interaction('elementHighlight', true);
        // 渲染图表
        chartRef.current.render();

        // 在组件卸载时销毁图表
        return () => {
            chartRef.current?.destroy();
        };
    }, []); // 空依赖数组确保此 effect 只执行一次

    return (
        <div id="g2_3" style={{ height: '220px',width: '220px',position: 'absolute',top:'50%',right: '0',transform: 'translateY(-50%)' }}></div>
    );
};

export default G2_3;
